<template>
    <!-- :style="{ height: `calc(100vh - ${statusBarHeight}rpx)` }" -->
	<view class="content" >
       <view class="add_content">
            <!-- 左边 图片 -->
            <view class="left_img">
                <view class="main_picture">
                    <view v-if="!main_picture_img" class="add_img" @click="handleUpload">
                        <text class="iconfont icon-jia1"></text>
                    </view>
                    <view  v-else class="img_box">
                        <image style="width: 100%; height: 100%;" mode="scaleToFill" :src="main_picture_img" />
                        <text @click="handleDelMainImg()" class="iconfont icon-jian1"></text>
                    </view>
                </view>

                <!-- <view class="upload_img_list">
                    <view style="width: 100%;" v-for="(item, index) in imageList" :key="index">
                        <uni-grid :column="2" :highlight="true" :showBorder="false" >
                            <uni-grid-item v-for="(i, j) in item" :key="j">
                                <view v-if="i.typeUpload !='addImg'" class="img_box" :style="{ 'margin-left': j%2 == 0 ? '0rpx' : '10rpx' }" @touchstart="handleTouchStart(i)">
                                    <image style="width: 100%; height: 120rpx;" mode="scaleToFill" :src="i.src" />
                                    <text @click="delImg(item, i)" class="iconfont icon-jian1"></text>
                                    <view class="text">双击图片更换主图</view>
                                </view>
                                <view v-else class="upload_addImg" @click="uploading">
                                    <text class="iconfont icon-jia1"></text>
                                </view>
                            </uni-grid-item>
                        </uni-grid>
                    </view>
                </view> -->
            </view>


            <!-- 右边 form -->
            <view class="right_form">
                <uni-forms class="form" ref="form" :modelValue="formData" :rules="rules">
                    <!-- <uni-forms-item label="条形码:" name="bbreed">
                        <view class="form_item">
                            <input type="text" v-model="formData.bbreed" placeholder="扫条码或者输入数字码快速录入" />
                            <text class="iconfont icon-saoma"></text>
                        </view>
                    </uni-forms-item> -->
                    <uni-forms-item label="货号:" name="bbreed" required>
                        <input type="text" v-model="formData.bbreed" placeholder="请输入货号" />
                    </uni-forms-item>
                    <uni-forms-item label="品名:" name="description" required>
                        <input type="text" v-model="formData.description" placeholder="请输入品名" />
                    </uni-forms-item>

                    <uni-forms-item label="类别:" name="stype" required>
                        <uni-data-select
                            v-model="formData.stype"
                            :localdata="huohaotypeList"
                            placeholder="请选择类别"
                            @change="changeType"
                        ></uni-data-select>
                    </uni-forms-item>
                    <uni-forms-item label="单位:" name="dw" required>
                        <uni-data-select
                            v-model="formData.dw"
                            :localdata="dwList"
                            placeholder="请选择单位"
                        ></uni-data-select>
                    </uni-forms-item>

                    <uni-forms-item label="成本价:" name="xscb_price">
                        <input type="number" v-model="formData.xscb_price" placeholder="请输入成本价" />
                    </uni-forms-item>

                    <uni-forms-item label="销售价:" name="xsprice">
                        <input type="number" v-model="formData.xsprice" placeholder="请输入销售价" />
                    </uni-forms-item>
                    <uni-forms-item label="颜色:" name="colorStr">
                        <view @click="handlePopup('color')">
                            <view style="width: 300rpx; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" v-if="formData.colorStr">
                                {{ formData.colorStr }}
                            </view>
                            <view v-else style="color: #808080; font-size: 15rpx;">请选择颜色</view>
                        </view>
                    </uni-forms-item>
                    <uni-forms-item label="尺码:" name="chimaStr">
                        <view @click="handlePopup('chima')">
                            <view style="width: 300rpx; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" v-if="formData.chimaStr">
                                {{ formData.chimaStr }}
                            </view>
                            <view v-else style="color: #808080; font-size: 15rpx;">请选择尺码</view>
                        </view>
                    </uni-forms-item>

                    <uni-forms-item name="checkMap">
                        <uni-data-checkbox v-model="formData.checkMap" multiple :localdata="checkList" />
                    </uni-forms-item>



                </uni-forms>
                <view style="display: flex; justify-content: center;">
                    <button style="width: 80%; " hover-class="hover_btn" @click="submitForm">保存新增</button>
                </view>
            </view>
       </view>


       <!-- 底部弹窗 选择颜色 -->
       <bottom-popup :maskClick="true" ref="colorPopup">
        <view class="popup_content">
            <!-- 标题 -->
            <view class="popup_title">
                <view class="title">{{ popupType == 'color' ?'颜色' : '尺码' }}</view>
                <text @click="closePopup" class="iconfont icon-shanchu1"></text>
            </view>

            <view v-if="popupType == 'color'" style="display: flex; flex-direction: column; height: 65vh;" >
                <view class="popup_form" style="  width: 80%;" >
                    <input v-model="popupSearchColor" placeholder="请输入名称"/>
                    <button style="height: 40rpx; margin-left: 10rpx;" @click="searchColors">搜索</button>
                </view>
                <view style="flex: 1; overflow: auto; display: flex">
                    <scroll-view style="height: 100%; width: 80%;" scroll-y="true">
                        <view class="item_list">
                            <view class="list_item" :class="{active: item.active}" v-for="(item, index) in popupSreachColorList" @click="handleActive(item)">
                                {{ item.name }}
                            </view>
                        </view>
                    </scroll-view>

                    <scroll-view style="height: 100%; width: 20%; border-left: 1rpx solid #ccc; " scroll-y="true">
                        <view>
                            <view style="border-bottom: 1rpx solid #ccc; padding-top: 10rpx;" v-for="(item, index) in color_com" >
                                {{ item.name }}
                            </view>
                        </view>
                    </scroll-view>
                </view>
            </view>

            <view v-else style="flex: 1; overflow: auto;">
                <scroll-view style="height: 100%;" scroll-y="true">
                   <view class="item_list">
                        <view class="list_item" :class="{active: item.active}" v-for="(item, index) in popupList" @click="handleActive(item)">
                            {{ item.name }}
                        </view>
                        <!-- <view class="list_item" >
                            <text class="iconfont icon-jia1"></text>
                        </view> -->
                   </view>
                </scroll-view>
            </view>

            <view class="popup_btn">
                <button hover-class="hover_btn" @click="handleAddType">
                    <text class="iconfont icon-jia1"></text>
                </button>
                <button hover-class="hover_btn" @click="popupClean">清空</button>
                <button hover-class="hover_btn" @click="popupSave">确认</button>
            </view>
        </view>
       </bottom-popup>

       <!-- 添加类型 颜色和尺码 弹出框 -->
       <uni-popup ref="colorChimaPopup" :mask-click="false" type="bottom">
			<view class="colorChimaPopup">
                <view style="display: flex; align-items: center; justify-content: center; padding-bottom: 10rpx; font-size: 25rpx;">
                    添加{{ popupType == 'color' ?'颜色' : '尺码' }}
                </view>
                <input v-model="addTypeName" style="font-size: 20rpx; padding-bottom: 10rpx;" placeholder="请输入名称" />

				<view class="btn_footer">
					<button @click="handleSaveCenter" hover-class="hover_btn">确认</button>
					<button @click="close" hover-class="hover_btn" >取消</button>
				</view>
			</view>
		</uni-popup>


       <!-- <centerPopup v-if="typeCenterPopup" :visible.sync="typeCenterPopup">
        <view style="max-height: 50vh; background: #fff;">
            <view style="display: flex; align-items: center; justify-content: center; padding-bottom: 10rpx;">
                添加{{ popupType == 'color' ?'颜色' : '尺码' }}
            </view>
            <input v-model="addTypeName" style="font-size: 30rpx; padding-bottom: 10rpx;" placeholder="请输入名字" />
            <button hover-class="hover_btn" @click="handleSaveCenter">确认</button>
        </view>
       </centerPopup> -->

	</view>
</template>

<script>
import BottomPopup from '@/components/custom-bottom-popup/custom-bottom-popup.vue'; // 引入自定义组件
import centerPopup from '@/components/custom-center-popup/custom-center-popup.vue'; // 引入自定义组件
import utils from "@/utils/utils.js";
import Http from '@/service/api'
	export default {
		components: {
			BottomPopup,
            centerPopup,
		},
		data() {
			return {
				statusBarHeight: 0,
                // 左侧图片处理
                imageList: [],
                uploadImgSl: 9, // 上传图片数量 9 张
                lastTap: 0, // 记录上一次点击的时间戳 双击事件
                main_picture_img: '', // 主图
                dk: uni.getStorageSync('baseUrl'),

                // from 表单
                huohaotypeList: [], // 类别选择
                dwList: [], // 类别选择
                checkList: [{"value": '上架',"text": "上架"	},{"value": '推荐',"text": "推荐"}],
                popupList: [],
                popupSreachColorList: [],
                popupType: '', // 底部弹出框类型
                typeCenterPopup: false, // 
                addTypeName: '', // 添加类型名称
                colorList: [], // 颜色列表
                chimaList: [], // 尺码列表
                popupSearchColor: '', // 颜色搜索

                formData: {
                    checkMap: [], // 上架推荐
                },
                rules: {
                    bbreed: {
                        rules: [{
                                required: true,
                                errorMessage: '请输入货号',
                            },
                        ]
                    },
                    description: {
                        rules: [{
                                required: true,
                                errorMessage: '请输入品名',
                            },
                        ]
                    },
                    stype: {
                        rules: [{
                                required: true,
                                errorMessage: '请选择类别',
                            },
                        ]
                    },
                    dw: {
                        rules: [{
                                required: true,
                                errorMessage: '请选择单位',
                            },
                        ]
                    },
                }
            }
		},
        computed: {
           color_com() {
            return this.popupList.filter(item => item.active)
           }
        },
		onLoad() {
            this.statusBarHeight = this.$globalMap.statusBarHeight
            // let a = []
            // for(let i=0; i<8; i++) {
            //     a.push({ src: `../../static/login/${i+1}.jpg` })
            // }
            // a.push({src: '', typeUpload: 'addImg'})
            // this.imageList = utils.splitArray(a, 2)

            this.GetBaseInfoList()
            console.log('== baseUrl ', uni.getStorageSync('baseUrl') , '--')
		},
		methods: {
            // 右侧 form 表单
            submitForm() {
                let newA = this.formData.checkMap
                
                if (newA.includes('上架')) {
                    this.formData.isSj = 1
                } else {
                    this.formData.isSj = 0
                }
                if (newA.includes('推荐')) {
                    this.formData.isSuggest = 1
                } else {
                    this.formData.isSuggest = 0
                }
                
                console.log('== 提交 ', this.formData)
                this.$refs.form.validate().then(res=>{
                    let param = {
                        uid: uni.getStorageSync('uid'),
                        mainJson: JSON.stringify(this.formData),
                        obj: this.formData,
                        colordetailJson: JSON.stringify(this.formData.colorStr),
                        chimadetailJson: JSON.stringify(this.formData.chimaStr),
                    }

                    console.log('== 11 param ', param)

                    Http.SysHuohao(param).then(r => {
                        console.log('== r ', r)
                        let ModulePrimaryKey = r.bh
                        let param2 = {
                            hhimg: this.main_picture_img,
                            Module: '货号维护',
                            ModulePrimaryKey,
                            sort: 0,
                            IsMain: 1,
                            customId: uni.getStorageSync('customId'),
                        }

                        console.log('== param2 ', param2)

                        uni.showToast({
                            title: '保存成功',
                            icon: 'none',
                        });
                        this.formData = {checkMap: []}
                        this.formData.bbreed = ''
                        this.formData.description = ''
                        this.formData.xscb_price = ''
                        this.formData.xsprice = ''
                        uni.uploadFile({
                            url: `https://${this.dk}/BaseInfo/SysHuohao/UploadAdd.aspx`,
                            filePath: this.main_picture_img, //从调用页面传入 --path: imgbox, 选取图片的地址数组  
                            name: 'img',
                            formData: {
                              Module: '货号维护',
                              ModulePrimaryKey,
                              sort: 0,
                              IsMain: 1,
                              customId: uni.getStorageSync('customId'),
                            },
                            header: {
                                "Content-Type": "multipart/form-data",
                                "Authorization": 'Bearer ' + uni.getStorageSync('token'),
                            },
                            success: (r) => {
                                if (r.statusCode == 200) {
                                    let data = JSON.parse(r.data)
                                    console.log('== data ---- ', data)
                                    if (data.code == 1) {
                                        this.main_picture_img = ''
                                    }
                                }
                            },
                            fail: (err) => {
                                console.log('== img err ', err)
                            }
                        })

                    }).catch(err => {
                        console.log('== err bc ', err)
                        uni.showToast({
                            title: err.message,
                            icon: 'none',
                        });
                    })


                }).catch(err =>{
                    console.log('表单错误信息：', err);
                })
            },
            changeType(e) {
                console.log('== e ', e)
            },
            GetBaseInfoList() {
                Http.GetBaseInfoList({ param: 'huohaotype,dw,color,chima' }).then(r => {
                    console.log('== r ', r)
                    console.log('== huohaotype ', r.huohaotype.length)
                    console.log('== dwList ', r.dw.length)
                    this.huohaotypeList = r.huohaotype.map(i => ({...i, value: i.bh, text: i.name}))
                    this.dwList = r.dw.map(i => ({...i, value: i.name, text: i.name}))

                     this.colorList = r.color.map(i => ({...i, active: false }))
                     this.chimaList = r.chima.map(i => ({...i, active: false }))

                    if (this.popupType == 'color') {
                        this.popupList = this.colorList
                    } else {
                        this.popupList = this.chimaList
                    }
                })
            },
            // 选择颜色
            handlePopup(type) {
                this.popupType = type
                if (type == 'color') {
                    this.popupList = this.colorList
                    this.popupSreachColorList = this.colorList
                } else {
                    this.popupList = this.chimaList
                }

                let selectList = []
                if (this.formData.colorStr && type == 'color') {
                    selectList = this.formData.colorStr.split(',')
                } else if (this.formData.chimaStr && type == 'chima') {
                    selectList = this.formData.chimaStr.split(',')
                }
                // 颜色 数据回显
                
                if (type == 'color') {
                    this.popupList = this.popupList.map(i => ({...i, active: selectList.includes(i.name)}))
                    this.popupSreachColorList = this.popupList
                } else {
                    this.popupList = this.popupList.map(i => ({...i, active: selectList.includes(i.name)}))
                }

                this.$refs.colorPopup.showPopup();

                
                return

                Http.GetBaseInfoList({ param: 'color,chima' }).then(r => {
                    let colorList = r.color.map(i => ({...i, active: false }))
                    let chimaList = r.chima.map(i => ({...i, active: false }))

                    if (type == 'color') {
                        this.popupList = colorList
                    } else {
                        this.popupList = chimaList
                    }

                    let selectList = []
                    if (this.formData.colorStr && type == 'color') {
                        selectList = this.formData.colorStr.split(',')
                    } else if (this.formData.chimaStr && type == 'chima') {
                        selectList = this.formData.chimaStr.split(',')
                    }

                    // 颜色 数据回显
                    this.popupList = this.popupList.map(i => ({...i, active: selectList.includes(i.name)}))
                    this.$refs.colorPopup.showPopup();
                })
            },
            handleAddType() {
                this.addTypeName = ''
                this.$refs.colorChimaPopup.open('center')
            },
            close() {
                this.$refs.colorChimaPopup.close()
            },
            handleSaveCenter() {
                if (!this.addTypeName) {
                    uni.showToast({
                        title: '请输入名字',
                        duration: 2000,
                        icon: 'none'
                    });
                    return
                }

                if (this.popupList.filter(i => i.name == this.addTypeName).length) {
                        uni.showToast({
                            title: '请勿重复添加',
                            duration: 2000,
                            icon: 'none'
                        });
                        return
                    }
                // this.popupList.push({
                //     name: this.addTypeName,
                //     active: false
                // })
                let param = {
                    uid: uni.getStorageSync('uid'),
                    main: {
                        name: this.addTypeName,
                    }
                }
                if (this.popupType == 'color') {
                    Http.SysColor(JSON.stringify(param)).then(r => {
                        console.log('== r color ', r)
                        uni.showToast({
                            title: '颜色添加成功',
                            duration: 2000,
                            icon: 'none'
                        });
                        setTimeout(() => {
                            this.$refs.colorChimaPopup.close()
                        }, 900)
                        this.GetBaseInfoList()
                    }).catch(err => {
                        console.log('== err color ', err)
                        uni.showToast({
                            title: err.message,
                            duration: 2000,
                            icon: 'none'
                        });
                    })

                } else {
                    Http.SysChima(JSON.stringify(param)).then(r => {
                        console.log('== r color ', r)
                        uni.showToast({
                            title: '尺码添加成功',
                            duration: 2000,
                            icon: 'none'
                        });
                        setTimeout(() => {
                            this.$refs.colorChimaPopup.close()
                        }, 900)

                        this.GetBaseInfoList()
                    }).catch(err => {
                        console.log('== err chima ', err)
                        uni.showToast({
                            title: err.message,
                            duration: 2000,
                            icon: 'none'
                        });

                    })

                }

               
            },
            handleActive(item) {
                this.popupList = this.popupList.map(i => ({...i, active: item.name == i.name ? !i.active : i.active}))

                if (this.popupType == 'color') {
                    this.popupSreachColorList = this.popupSreachColorList.map(i => ({...i, active: item.name == i.name ? !i.active : i.active}))
                }
            },
            popupSave() {
                let selectList = this.popupList.filter(i => i.active)
                if (!selectList.length) {
                    uni.showToast({
                        title: '请选择',
                        duration: 2000,
                        icon: 'none'
                    });
                    return
                }
                this.formData = {
                    ...this.formData,
                    colorStr: this.popupType == 'color' ? selectList.map(i => i.name).join(',') : this.formData.colorStr,
                    chimaStr: this.popupType == 'chima' ? selectList.map(i => i.name).join(',') : this.formData.chimaStr,
                }
                console.log('== colorStr ', this.formData.colorStr)
                console.log('== chimaStr ', this.formData.chimaStr)
                this.$refs.colorPopup.closePopup()
            },
            popupClean() {
                this.popupList = this.popupList.map(i => ({...i, active: false}))
            },
            closePopup() {
                this.$refs.colorPopup.closePopup()
            },




             // 上传图片
            handleUpload() {
                uni.chooseImage({
                    count: 1, // 最多选择1张图片
                    success: (res) => {
                        console.log('== res ', res )
                        console.log('== tempFilePaths ', res.tempFilePaths )
                        this.main_picture_img =  res.tempFilePaths[0]

                        console.log('==   img------ ', this.main_picture_img)
                      
                        // uni.uploadFile({
                        //     url: `https://${this.dk}/BaseInfo/SysHuohao/UploadAdd.aspx`,
                        //     filePath: this.main_picture_img, //从调用页面传入 --path: imgbox, 选取图片的地址数组  
                        //     name: 'img',
                        //     formData: {
                        //       Module: '货号维护',
                        //       ModulePrimaryKey: '0038',
                        //       sort: 0,
                        //       IsMain: 1,
                        //       customId: uni.getStorageSync('customId'),
                        //     },
                        //     header: {
                        //         "Content-Type": "multipart/form-data",
                        //         "Authorization": 'Bearer ' + uni.getStorageSync('token'),
                        //     },
                        //     success: (r) => {
                        //         console.log('== img r ', r)
                        //         if (r.statusCode == 200) {
                        //             console.log('== img r.data ', r.data)
                        //             let data = JSON.parse(r.data)
                        //             console.log('== data ---- ', data)

                        //         }
                                
                        //     },
                        //     fail: (err) => {
                        //         console.log('== img err ', err)
                        //     }
                        // })

                    },
                });
            },

            // 删除图片
            handleDelMainImg() {
                this.main_picture_img = ''
            },

            // 左侧 图片处理
            uploading() {
                let imgListLength = this.imageList.flat().filter(i => i.src); // 需要上传的图片列表
                uni.chooseImage({
                    count: this.uploadImgSl - imgListLength.length, // 最多选择9张图片
                    success: (res) => {
                        console.log('== res ', res )
                        console.log('== tempFilePaths ', res.tempFilePaths )
                        let imgList = imgListLength.concat(res.tempFilePaths.map(i => ({ src: i })))
                        if (imgList.length < this.uploadImgSl) {
                            imgList.push({src: '', typeUpload: 'addImg'})
                        }
                        // console.log('== imgList ', imgList)
                        this.imageList = utils.splitArray(imgList, 2); // 将选择的图片路径存储到 imageList 中
                    },
                });
            },
            delImg(item, i) {
                console.log('== 删除 ', '= ', i)
                let imgList = this.imageList.flat().filter(j => j.src != i.src)
                 if (imgList.length < this.uploadImgSl && (imgList.filter(i => i.typeUpload == 'addImg').length == 0)) {
                    imgList.push({src: '', typeUpload: 'addImg'}) // 添加一个占位图片
                }
                this.imageList = utils.splitArray(imgList, 2);
               
            },
            // 处理 touchstart 事件
            handleTouchStart(i) {
                const currentTime = new Date().getTime(); // 获取当前点击的时间戳
                const timeDifference = currentTime - this.lastTap; // 计算两次点击的时间差

                if (timeDifference < 300 && timeDifference > 0) { // 300ms以内为双击
                    this.handleDoubleClick(i);
                }

                this.lastTap = currentTime; // 更新最后一次点击的时间戳
            },
            // 双击事件的处理函数
            handleDoubleClick(i) {
                console.log('== i ', i)
                this.main_picture_img = i.src
                uni.showToast({
                    title: '更换主图成功',
                    icon: 'success',
                });
            },

            searchColors() {
                let list = this.popupList.filter(i => i.name.indexOf(this.popupSearchColor) > -1)

                if (!this.popupSearchColor) {
                    this.popupSreachColorList = this.popupList
                    return 
                }
                if (!list.length) {
                    uni.showToast({
						title:'没有查询到颜色',
						icon:'none',
						duration:1500  
					})
                    return
                }
                this.popupSreachColorList = list
            }


            
		}
	}
</script>

<style lang="less" scoped>
.content {
	height: 100vh;
    width: 100%;
  
    .add_content {
        height: 100%;
        width: 100%;
        display: flex;

        .left_img {
            margin: 5px 0 0 5rpx;
            width: 40%;
            background: #fff;
            display: flex;
            flex-direction: column;

            .main_picture {
                width: 100%;
                height: 250rpx;
                background: #e5e5e5;

                .add_img {
                    height: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    .iconfont {
                        font-size: 40rpx;
                        color: #9a9a9a;
                    }
                }

                .img_box {
                    position: relative;
                    width: 100%;
                    height: 100%;

                    .iconfont {
                        position: absolute;
                        top: 0rpx;
                        left: 0rpx;
                        color: red;
                        font-size: 40rpx;
                    }
                }
            }

            .upload_img_list {
                overflow: auto;
                border: 1rpx solid #ccc;
                margin-top: 10rpx;
                padding: 5rpx;


                .img_box {
                    position: relative;
                    height: 100%;

                    .iconfont {
                        position: absolute;
                        top: 0;
                        left: 0;
                        font-size: 30rpx;
                        color: red;
                    }
                }
                .text {
                    width: 100%;
                    position: absolute;
                    font-size: 14rpx;
                    color: #ccc;
                    text-align: center;
                }

                .upload_addImg {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    height: 100%;
                    height: 100%;
                    background: #e5e5e5;

                    .iconfont {
                        font-size: 30rpx;
                        color: #fff;
                    }
                }
                
            }
        }

        .right_form {
            flex: 1;
            background: #fff;
            margin: 20rpx 5rpx 0 10rpx;

            .form {

                .uni-forms-item {
                    align-items: center;
                }

                .form_item {
                    display: flex;
                    align-items: center;

                    input {
                        flex: 1;
                    }

                    .iconfont {
                        font-size: 30rpx;
                        margin: 0 10rpx;
                    }

                }
            }
        }

    }
}

// 底部弹出框 
.popup_content {
    max-height: 75vh;
    display: flex;
    flex-direction: column;
    padding: 10rpx 20rpx;

    .popup_title {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        padding-bottom: 10rpx;
        border-bottom: 1rpx dashed  #ccc;

        .iconfont {
            position: absolute;
            right: 0;
            top: -5rpx;
            font-size: 30rpx;
            color: #9e9e9e;
        }

    }

    .popup_form {
        display: flex; 
        align-items: center;
        padding-top: 10rpx;

        input {
            flex: 1;
            font-size: 20rpx;
            border: 1rpx solid #ccc;
            padding: 5rpx 8rpx;
            border-radius: 3rpx;
        }
    }

    .item_list {
        display: flex;
        flex-wrap: wrap;
        margin-top: 20rpx;

        .list_item {
            border: 1rpx solid #ccc;
            border-radius: 6rpx;
            padding: 5rpx 15rpx;
            margin: 0 5rpx 5rpx 0;

            .iconfont {
                font-size: 20rpx;
            }
        }

        .active {
            background: #ff8800;
            color: #fff;
        }

        
    }

    .popup_btn {
        display: flex;
        align-items: center;
        justify-content: space-around;
        padding-top: 10rpx;
        border-top: 1rpx solid #ccc;

        .iconfont {
            font-size: 20rpx;
        }

       
    }
}

.colorChimaPopup {
    max-height: 50vh; 
    background: #fff;
    padding: 10rpx;
    border-radius: 10rpx;

    .btn_footer {
        display: flex;
        align-items: center;
        justify-content: space-around;
        button {
            height: 30rpx;
        }
    }
}

button {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50rpx;
    margin: 0;
    background: #f9a94d;
    color: #fff;
    width: 30%;
}

.hover_btn {
    background: #d89243;
}
</style>
